<template>
  <yd-ls-layout title="我的积分" :onfoot=false :tolfurl="urls" >
    <div class="yd-ls-height"></div>
    <div class="yd-ls-points-top">
      <span>目前积分</span>
      <p><yd-icon slot="icon" color="#FF685D" name="creditssolid" custom></yd-icon>{{ points.integralBalance }}</p>
    </div>
    <yd-cell-group>
      <yd-cell-item class="yd-ls-me-group" type="link" href="/pointsdetail" arrow>
        <span slot="left">积分明细</span>
      </yd-cell-item>
      <yd-cell-item type="link" href="/pointsrule" arrow>
        <span slot="left">积分规则说明</span>
      </yd-cell-item>
    </yd-cell-group>
    <!--<yd-backtop></yd-backtop>-->
  </yd-ls-layout>
</template>

<style>

  .yd-ls-points-top {
    height: 100px;
    background-color: rgb(72, 112, 243);
    color: #fff;
  }
  .yd-ls-points-top span {
    font-size: .28rem;
    display: block;
    padding-top: 20px;
    padding-left: 20px;
  }
  .yd-ls-points-top p {
    font-size: 0.52rem;
    padding: 8px 20px;
    color: #ef6d6f;
  }
</style>
<script>
  import ydLsLayout from '../../../components/yd-ls-layout.vue'
  import api from '../../../axios/api'

  export default {
    name: 'points',
    data () {
      return {
        urls: 'info.html',
        points: {},
        pageIndex: 1,
        pageSize: 10
      }
    },
    methods: {
      init() {
        //TODO:初始化数据
        this.getPoints()
      },
      getPoints() {
        this.$dialog.loading.open(api.default_loading_txt);
        this.axios.get(api.points_data,{
          params: {
            pageindex: this.pageIndex,
            pagesize: this.pageSize
          }
        })
          .then(m=>{
            let points_data = m.data
            this.points = points_data.data
            this.$store.dispatch('fetchPointsData', points_data.data)
            this.$dialog.loading.close()
          }).catch(err=>{
            this.$dialog.loading.close()
            this.$dialog.alert({mes: JSON.stringify(err)})
          })
      }
    },
    mounted() {
      this.init()
    },
    components: { ydLsLayout }


  }
</script>
